package tmpl

func GetIndexTpl() string {
	return `<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no"/>
    <meta content="telephone=no" name="format-detection"/>
    <title></title>
    <script>
        (function (_D) {
            var _self = {};
            _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            _self.Html = _D.getElementsByTagName("html")[0];
            _self.widthProportion = function () {
                var p = Number(_self.Html.offsetWidth / 750).toFixed(3);
                //return p;
                return p > 1.024 ? 1.024 : p < 0.427 ? 0.427 : p;
            };
            _self.changePage = function () {
                _self.Html.setAttribute("style", "font-size:" + _self.widthProportion() * 100 + "px");
            };
            _self.changePage();
            if (!document.addEventListener) return;
            window.addEventListener(_self.resizeEvt, _self.changePage, false);
            document.addEventListener('DOMContentLoaded', _self.changePage, false);
        })(document);
    </script>
</head>
<style>
    *{font-size:.24rem}
    *{margin:0;padding:0}
    :root {--font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;}
    blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;box-sizing:border-box}
    button,img,input,select,textarea{vertical-align:middle;outline:0;border:0}
    body{font-family:var(--font-family);overflow-x:hidden;background:#edeef2}
    body,html{min-height:100%}
    a{text-decoration:none;color:#333;text-align:center}
    em,i{font-style:normal;font-weight:500}
    li,ol,ul{list-style:none}
    img{font-size:0;line-height:0;border:0;vertical-align:middle}
    *{outline:0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}
    input[type=button]{-webkit-appearance:none}
    .main{margin:0 auto;max-width:7.5rem;min-width: 7.5rem;width:100%;margin-bottom:.3rem}
    .title{margin-top:.2rem;text-align:center}
    .title a{font-size:.3rem;font-weight:700;color:#333;line-height:.6rem;}
    .status_box{margin:auto .2rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
    .online li{display:flex;align-items:center;float:left;margin-left:.2rem;font-size:.26rem;font-family:Helvetica;font-weight:700;color:green;line-height:.6rem}
    .sign{margin:auto .1rem;width:.08rem;height:.08rem;background:green;border-radius:50%;display:inline-block}
    .off{background:red}
    .offline{color:red!important}
    .seize_seat{width:1.2rem;height:.4rem}
    .show_logs{background:#333;border-radius:0.06rem;font-size:0.26rem;font-weight:400;color:#fff;line-height:.4rem;text-align:center}
    .item_box{margin:0.2rem 0.2rem 0 0.2rem;padding:0.2rem;background:#fff;box-shadow:0 .06rem .1rem 0 #dcdde0;border-radius:.16rem}
    .item_info{display:flex;align-items:center}
    .item_name{width:1.7rem;font-size:.26rem;font-weight:700;color:#333;line-height:.6rem;align-items:center}
    .item_type img{margin-left:.2rem;width:.3rem;height:.3rem}
    .item_node{flex-grow:1;max-width:5rem;width: 5rem;overflow: hidden;}
    .item_node ul{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}
    .item_node li{display:flex;align-items:center;flex:0 0 33.3333%}
    .item_node li span{width:1.2rem;font-size:.26rem;font-weight:400;color:green;line-height:.6rem;overflow:hidden;white-space:nowrap;display:block}
    .item_node li img{width:.3rem;height:.3rem}
    .item_node select{flex-grow:1;background: transparent;}
    .item_node option{font-size:.26rem;font-weight:400;color:#333;}
    .item_button{margin:auto 1.6rem;display:flex;justify-content:space-evenly;flex-wrap:wrap;align-items:center;padding-top:.2rem;padding-bottom:.2rem}
    .button{width:1.4rem;height:.4rem;padding:0.06rem 0; background:#333;border-radius:0.06rem;line-height:.4rem;text-align:center;font-size:.26rem;font-weight:400;color:#fff}
    .button,.show_logs{cursor: pointer;}
    .svn, .git{width: 0.5rem;height: 0.5rem;background-repeat: no-repeat;background-size: contain; }
    .svn{background-image: url("") }
    .git{background-image: url("")}
    .server{width: 0.3rem;height: 0.3rem;background-repeat: no-repeat;background-size: contain; background-image: url("");}
    .dialog{position:fixed;left:0;top:0;z-index:10001;width:100%;height:100%;display: none;}
    .dialog-overlay{position:absolute;top:0;left:0;z-index:10002;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display: flex;justify-content: center;align-items: center;}
    .dialog-content{width:2rem;height:2rem;padding:0.2rem;border-radius:0.1rem;background-color:rgba(0,0,0,0.8);display:flex;flex-direction: column;flex-wrap: wrap;justify-content: center;align-items: center;}
    .info-icon{width: 1.28rem;height: 1.28rem;background-repeat: no-repeat;background-size: contain;}
    .loading{background-image: url("")}
    .loading-success{background-image: url("");}
    .loading-faild{background-image: url("");}
    .info-text{display:block;margin:0.12rem auto 0;font-size:0.26rem;color:#ffffff}
    .logwin{position:fixed;left:0;top:0;z-index:10001;width:100%;height:100%;display: none;}
    .logwin-overlay{position:absolute;top:0;left:0;z-index:10002;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display: flex;justify-content: center;align-items: center;}
    .logwin-content{width:6rem;height:80%;padding:0.2rem;border-radius:0.1rem;background-color:#ffffff;display:flex;flex-direction: column;flex-wrap: wrap;align-items: center;}
    .log-title, .log-btn{display: flex;width: 100%;height: 0.6rem;justify-content: center;align-items: center}
    .log-title-left{width: 0.35rem;height: 0.35rem;}
    .log-title-center{font-size: 0.26rem;font-weight:700;flex-grow: 1;text-align: center;}
    .log-title-close{width: 0.35rem;height: 0.35rem;cursor:pointer;background-repeat: no-repeat;background-size: contain;background-image: url("")}
    .log-main{width: 100%;height: calc(100% - 1.3rem);}
    .log-main textarea{font-size: 0.2rem;font-family: var(--font-family);width: 100%;height: 100%;border: none;resize: none;}
</style>
<body>
<div class="main">
    <div class="title"><a target="_blank" href="https://github.com/ikool-cn/go-deploy">Go-deploy</a></div>
    <div class="status_box">
        <div class="seize_seat"></div>
        <div class="online">
            <ul>
                <li><span class="sign"></span>online</li>
                <li class="offline"><span class="sign off"></span>offline</li>
            </ul>
        </div>
        <div class="seize_seat show_logs">Logs</div>
    </div>

    <div class="item-list"></div>
</div>

<!--loading-->
<div class="dialog">
    <div class="dialog-overlay">
        <div class="dialog-content">
            <div class="info-icon loading"></div>
            <div class="info-text">Loading</div>
        </div>
    </div>
</div>

<!--log window-->
<div class="logwin">
    <div class="logwin-overlay">
        <div class="logwin-content">
            <div class="log-title">
                <div class="log-title-left"></div>
                <div class="log-title-center">Log List</div>
                <div class="log-title-close"></div>
            </div>
            <div class="log-main">
                <textarea spellcheck="false" id="log"></textarea>
            </div>
            <div class="log-btn">
                <div class="button clear">Clear</div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script>
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S": this.getMilliseconds()
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    function loadData() {
        $.ajax({
            url: "/list",
            dataType: "json",
            success: function (json) {
                if (json != null) {
                    var html = '';
                    $.each(json, function (index, item) {
                        html += '<div class="item_box group-'+item.groupid+'" data-id="' + item.groupid + '">' + "\n"
                        html += '<div class="item_info">\n' +
                            '                <div class="item_name">Type</div>\n' +
                            '                <div class="item_node '+(item.type =="git" ? 'git' : 'svn')+'"></div>\n' +
                            '            </div>\n'

                        html += '<div class="item_info">\n' +
                            '                <div class="item_name">Name</div>\n' +
                            '                <div class="item_node">'+item.name+'</div>\n' +
                            '</div>\n';

                        html += '<div class="item_info">\n' +
                            '                <div class="item_name">Node</div>\n' +
                            '                <div class="item_node">\n' +
                            '                    <ul>\n' + listNode(item.node) +
                            '                    </ul>\n' +
                            '                </div>\n' +
                            '            </div>';
                        html += '<div class="item_info">\n' +
                            '                <div class="item_name">Commit Log</div>\n' +
                            '                <div class="item_node">\n' +
                            '                    <select class="reversion">\n' +
                            '                    </select>\n' +
                            '                </div>\n' +
                            '            </div>';
                        html += '            <div class="item_button">\n' +
                            '                <div class="button deploy">Update</div>\n' +
                            '                <div class="button rollback">Rollback</div>\n' +
                            '            </div>\n';
                        html += '</div>\n';
                    });
                    $('.item-list').html(html);

                    $.each(json, function (index, item) {
                        showCommitLog(item.groupid)
                    });
                } else {
                    console.log(json);
                    loadingFaild('Resp err', true);
                }
            }
        })
    }

    function listNode(nodeList) {
        var html = '';
        $.each(nodeList, function (index, item) {
            if (typeof item.online != 'undefined' && item.online) {
                html += '<li title="' + item.addr + '"><em class="server"></em><span>'+item.alias+'</span></li>\n';
            } else {
                html += '<li title="' + item.addr + '"><em class="server"></em><span class="offline">'+item.alias+'</span></li>\n';
            }
        });
        return html;
    }

    function showCommitLog(groupid) {
        $.ajax({
            url: "/showlog",
            type: "POST",
            dataType: "json",
            data: {"groupid": groupid},
            success: function (json) {
                if (json != null && typeof json.Status != 'undefined') {
                    if (json.Status == true) {
                        var option = '';
                        $.each(json.Data, function (index, item) {
                            option += '<option value="' + item.Reversion + '">' + item.Reversion + ' | ' + item.Author + ' | ' + item.Time + ' | ' + item.Content + '</option>' + "\n";
                        });
                        $('.group-' + groupid).find('.reversion').html(option)
                    } else {
                        stdlog(groupid, json.Msg, "")
                    }
                } else {
                    console.log(json);
                    loadingFaild('Resp err', true);
                }
            }
        });
    }

    function stdlog(groupid, msg, elapsed) {
        msg = msg || "Empty response from server\n";
        var elapsed_time = (elapsed =='' ? '' : '===================\nElapsed Time: ' + elapsed + 's\n===================\n');
        $('#log').prepend(elapsed_time + msg);
    }

    //clear logs
    $('.clear').on('click', function () {
        $('#log').empty();
    });

    //show logs
    $('.show_logs').on('click', function (){
        $('.logwin').show();
    });

    //close logs
    $('.log-title-close').on('click', function (){
        $('.logwin').hide();
    });

    $(document).on('click', '.deploy', function () {
        var groupid = $(this).closest('.item_box').data('id');
        showLoading();
        $.ajax({
            url: "/deply",
            type: "POST",
            dataType: "json",
            data: {"groupid": groupid},
            success: function (json) {
                if (json != null && typeof json.Status != 'undefined') {
                    loadingSuccess('Success', true)
                    if (json.Status == true) {
                        stdlog(groupid, json.Data, json.Elapsed)
                    } else {
                        stdlog(groupid, json.Msg, "")
                    }
                } else {
                    console.log(json);
                    loadingFaild('Resp err', true);
                }
            },
            complete: function () {
                window.setTimeout(function () {
                    closeLoading();
                }, 1500);
            },
            error: function (xhr, textStatus, errorThrown) {
                console.log(xhr)
                try {
                    var jsonobj = JSON.parse(xhr.responseText);
                    loadingFaild(jsonobj.error, true);
                } catch (e) {
                    console.log(xhr)
                }
            }
        })
    });

    $(document).on('click', '.rollback', function () {
        obj = $(this).closest('.item_box');
        var groupid = obj.data('id');
        var reversion = $.trim(obj.find('.reversion').val());
        if ( reversion != "" && confirm('confirm to rollback?')) {
            showLoading();
            $.ajax({
                url: "/rollback",
                type: "POST",
                dataType: "json",
                data: {"groupid": groupid, "reversion": reversion},
                success: function (json) {
                    if (json != null && typeof json.Status != 'undefined') {
                        loadingSuccess('Success', true)
                        if (json.Status == true) {
                            stdlog(groupid, json.Data, json.Elapsed);
                        } else {
                            stdlog(groupid, json.Msg, "");
                        }
                    } else {
                        console.log(json);
                        loadingFaild('Resp err', true);
                    }
                },
                complete: function () {
                    window.setTimeout(function () {
                        closeLoading();
                    }, 1500);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log(xhr)
                    try {
                        var jsonobj = JSON.parse(xhr.responseText);
                        loadingFaild(jsonobj.error, true);
                    } catch (e) {
                        console.log(xhr)
                    }
                }
            });
        }
    });

    //onload
    loadData();

    function showLoading(msg, autoClose) {
        msg = msg || 'Loading';
        autoClose = autoClose || false;
        $('.info-text').html(msg);
        $('.info-icon').removeClass('loading-success loading-faild').addClass('loading');
        $('.dialog').show();
        if (autoClose == true) {
            window.setTimeout(function () {
                closeLoading();
            }, 1500);
        }
    }

    function loadingSuccess(msg, autoClose) {
        $('.info-text').html(msg);
        autoClose = autoClose || false;
        $('.info-icon').removeClass('loading loading-faild').addClass('loading-success');
        $('.dialog').show();
        if (autoClose == true) {
            window.setTimeout(function () {
                closeLoading();
            }, 1500);
        }
    }

    function loadingFaild(msg, autoClose) {
        $('.info-text').html(msg);
        autoClose = autoClose || false;
        $('.info-icon').removeClass('loading loading-success ').addClass('loading-faild');
        $('.dialog').show();
        if (autoClose == true) {
            window.setTimeout(function () {
                closeLoading();
            }, 1500);
        }
    }

    function closeLoading() {
        $('.dialog').hide();
    }
</script>
</body>
</html>`
}
